<template>
  <div class="echart_back">
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

    <!-- <el-divider content-position="left">中意番剧排行榜</el-divider> -->
    <div class="admin_div">
      <div ref="div" class="div_echart div_back">
      </div>
      <div ref="div2" class="div_pir div_back">
      </div>
    </div>
    <div ref="div3" class="div_hbar div_back">
    </div>

  </div>

</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 饼形图
      datas: [],
      // 柱形图
      dimensionss: [],
      sources: []
    }
  },
  methods: {
    // 饼形图
    pirChart() {
      const piePatternImg = new Image()
      const bgPatternImg = new Image()
      // 得到饼图数据
      axios({
        url: 'http://localhost:3000/PieData',
        method: 'GET'
      }).then(response => {
        for (let index = 0; index < response.data.length; index++) {
          this.datas.push(response.data[index])
        }
        option && myCharts.setOption(option)
      })
      axios({
        url: 'http://localhost:3000/echart?type=pie',
        method: 'GET'
      }).then(response => {
        // console.log(response.data[0].data)
        piePatternImg.src = response.data[0].images.piePatternSrc
        bgPatternImg.src = response.data[0].images.bgPatternSrc
        // for (let index = 0; index < response.data[0].data.length; index++) {
        //   this.datas.push(response.data[0].data[index])
        // }
        option && myCharts.setOption(option)
      })

      var myCharts = this.$echarts.init(this.$refs.div2)
      let option = {
        backgroundColor: {
          image: bgPatternImg,
          repeat: 'repeat'
        },
        title: {
          text: '追番订阅比例/人',
          textStyle: {
            color: '#235894'
          }
        },
        tooltip: {},
        series: [
          {
            name: '订阅人数',
            type: 'pie',
            selectedMode: 'single',
            selectedOffset: 30,
            clockwise: true,
            label: {
              fontSize: 18,
              color: '#235894'
            },
            labelLine: {
              lineStyle: {
                color: '#235894'
              }
            },
            data: this.datas,
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            }
          }
        ]
      }
      // setTimeout(() => {
      //   option && myCharts.setOption(option)
      // }, 500)
      // option && myCharts.setOption(option)
    },
    barChart() {
      let myChart = this.$echarts.init(this.$refs.div)
      axios({
        url: 'http://localhost:3000/BarData',
        method: 'GET'
      }).then(response => {
        // console.log(response.data[0])
        for (let i = 0; i < response.data.length; i++) {
          this.sources.push(response.data[i])
        }
        myChart.setOption(option)
      })
      axios({
        url: 'http://localhost:3000/echart?type=bar',
        method: 'GET'
      }).then(response => {
        // console.log(response.data[0])
        for (let i = 0; i < response.data[0].dimensions.length; i++) {
          this.dimensionss.push(response.data[0].dimensions[i])
          // this.sources.push(response.data[0].source[i])
        }
        myChart.setOption(option)
      })
      var option = {
        title: {
          text: '微信支付各比例/元'
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: this.dimensionss,
          source: this.sources
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
    },
    HbarChart() {
      let myChart = this.$echarts.init(this.$refs.div3)
      let arr = []
      setTimeout(() => {
        for (let index = 0; index < this.datas.length; index++) {
          arr.push(this.datas[index].name)
        }
      }, 200)
      const data = []

      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200))
      }
      let option = {
        title: {
          text: '热度排行榜 2099 - 3000年'
        },
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['从零开始的异世界生活', '声之形', '刀剑神域', '四月是你的谎言', '东京喰种'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: '测试',
            type: 'bar',
            data: data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
      function run() {
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000)
          } else {
            data[i] += Math.round(Math.random() * 200)
          }
        }
        myChart.setOption({
          series: [
            {
              type: 'bar',
              data
            }
          ]
        })
      }
      setTimeout(function () {
        run()
      }, 0)
      setInterval(function () {
        run()
      }, 3000)

      option && myChart.setOption(option)
    }
  },
  mounted() {
    this.barChart()
    this.pirChart()
    this.HbarChart()
  }
}
</script>

<style lang="less" scoped>
.admin_div {
  display: flex;
  .div_echart {
    width: 400px;
    height: 500px;
    margin: 10px;
    flex: 1;
  }
  .div_pir {
    width: 600px;
    height: 500px;
    margin: 10px;
    flex: 1;
  }
}
.echart_back {
  width: 100%;
  height: 100%;
}
.div_hbar {
  margin: 10px;
  width: calc(100% - 20px);
  height: 400px;
}

.div_back {
  border: 2px #000 solid;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
</style>